<template>
  <div class="search-form">
    <el-form ref="formRef" v-bind="$attrs" :model="model">
      <el-row :gutter="16">
        <template v-for="(item, index) in formList">
          <el-col
            v-if="(index + 1 > collapseNum && !isCollapse) || index + 1 <= collapseNum"
            v-bind="getResponsive(item)"
            :index="index"
            :key="item.prop"
          >
            <el-form-item :label="`${item.label} :`">
              <slot v-if="item.valueType === 'custom'" :name="item.prop" :model="model" :item="item"></slot>
              <FormControls
                v-else
                :valueType="item.valueType"
                :options="enumMap[item.prop] ?? item.options ?? []"
                v-bind="item.fieldProps"
                :on="item.on"
                v-model="model[item.prop]"
              />
            </el-form-item>
          </el-col>
        </template>
        <el-col :xl="getButtonsCol" :md="12" :xs="24">
          <div class="operation">
            <el-button type="primary" @click="onSearch">搜索</el-button>
            <el-button @click="onReset">重置</el-button>
            <el-button v-if="showCollapse" type="primary" link class="search-isOpen" @click="isCollapse = !isCollapse">
              {{ isCollapse ? "展开" : "收起" }}
              <el-icon class="el-icon--right">
                <component :is="isCollapse ? ArrowDown : ArrowUp"></component>
              </el-icon>
            </el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script lang="ts">
export default {
  name: "SearchForm",
};
</script>
<script setup lang="ts">
import { ArrowDown, ArrowUp } from "@element-plus/icons-vue";

interface FormProps {
  // 搜索配置列
  formList: any[];
  // 搜索参数
  model?: { [key: string]: any };
  // 字典
  enumMap?: { [key: string]: any[] };
  // 搜索方法
  onSearch: (params: any) => void;
  // 重置方法
  onReset: (params: any) => void;
}

// 默认值
const props = withDefaults(defineProps<FormProps>(), {
  formList: () => ([]),
  model: () => ({}),
  enumMap: () => ({}),
});

// 获取响应式设置
const getResponsive = (item: any) => {
  return {
    xs: item.itemSpan ?? 24,
    md: item.itemSpan ?? 12,
    xl: item.itemSpan ?? 6
  };
};

// 计算查询按钮占位
const getButtonsCol = computed(() => {
  const spans = props.formList
    .filter((item, index) => (!isCollapse.value ? true : index + 1 <= collapseNum))
    .reduce((cur, next) => {
      const itemSpan = next.itemSpan ?? 6;
      return cur + itemSpan;
    }, 0);
  const restCol = spans < 24 ? 24 - spans : 24 - (spans % 24);
  const btnCol = restCol < 4 ? 4 : restCol;
  return btnCol;
});

const collapseNum = 3;
// 是否默认折叠搜索项
const isCollapse = ref(false);

// 判断是否显示 展开/合并 按钮
const showCollapse = computed(() => {
  return props.formList.length > collapseNum;
});
</script>

<style lang="scss" scoped>
.el-form {
  .el-form-item__content > * {
    width: 100%;
  }

  // 去除时间选择器上下 padding
  .el-range-editor.el-input__wrapper {
    padding: 0 10px;
  }
}
.operation {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 18px;
}
.el-form-item__content {
  flex: 1;
  display: flex;
  align-items: center;
  margin-left: 0 !important;

  > {
    .el-input {
      flex: 1;
    }

    .el-select {
      flex: 1;
    }

    .el-cascader {
      flex: 1;
    }
  }
}
</style>
